<template>
  <div style="padding-bottom:10px">
    <div class="search">
      <el-select style="width:100px" v-model="query.courseType">
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input style="width:420px" v-model="query.condition"></el-input>
      <el-button type="primary" @click.native="search">搜索</el-button>
    </div>
    <div class="module">
      <span style="font-size:18px">分类</span>
      <span class="verticalLine"></span>
      <span
        v-for="(item, index) in moduleList"
        class="tyleItem"
        :class="{ sel: item.value == selModule.value }"
        @click="changeType(item)"
      >{{ item.name }}</span>
    </div>
    <div style="margin:15px 0;cursor:pointer;user-select:none;font-size:18px" @click="changeSort">
      发布时间排序
      <i
        class="iconfont icon-up"
        style="font-weight:700;font-size:18px"
        :class="{'on':query.orderByField == 'gmt_create asc'}"
      ></i>
      <i
        class="iconfont icon-up1"
        style="font-weight:700;font-size:18px"
        :class="{'on':query.orderByField == 'gmt_create desc'}"
      ></i>
    </div>
    <div class="dataList">
      <ul>
        <li v-for="item in dataList">
          <div class="title">
            <span class="typeName">{{item.name}}</span>
            <a href="javascript:;" class="more" @click="moreData(item)">查看更多 >></a>
          </div>
          <div class="course">
            <el-row :gutter="20" type="flex">
              <el-col :span="6" v-for="(list,index) in item.value" :key="index">
                <div class="grid-content bg-purple" @click="goDetail(list)">
                  <div class="img">
                    <mImg :url="list.coverPath " :defaultUrl="'/static/img/default.jpg'"></mImg>
                  </div>
                  <p class="firstTitle text-overflow">{{list.courseName}}</p>
                  <p class="secondTitle">{{list.subtitle}}</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </li>
        <!-- <li>
          <div class="title">
            <span class="typeName">部门级</span>
            <a href="javascript:;" class="more">查看更多 >></a>
          </div>
          <div class="course">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <div class="img">
                    <img src="static/img/default.png" alt />
                  </div>
                  <p class="firstTitle text-overflow">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                  <p
                    class="secondTitle"
                  >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </li>-->
      </ul>
      <!-- <div style="text-align:center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000"
          @current-change="currentChange"
        ></el-pagination>
      </div>-->
    </div>
  </div>
</template>
<script>
const IMG_ROOT = process.env.IMG_ROOT;
import { courseList } from "@/api/course";
import { allCategory } from "@/api/system";
export default {
  name: "TrainDef",
  data() {
    return {
      IMG_ROOT: "",
      query: {
        courseType: "",
        condition: "",
        courseProject: "",
        orderByField: "gmt_create asc"
      },
      typeList: [],
      moduleList: [{ name: "全部", value: "" }],
      selModule: {
        name: "全部",
        value: ""
      },
      dataList: []
    };
  },
  methods: {
    search() {
      if (!this.query.condition && !this.query.courseType) {
        this.getDefData();
      } else {
        this.$router.push({
          path:
            "/train/search?condition=" +
            this.query.condition +
            "&courseType=" +
            this.query.courseType
        });
      }
    },
    getDefData() {
      courseList(this.query)
        .then(res => {
          if (res.code == 1) {
            if (this.typeList.length == 0) {
              for (let i = 0; i < res.response.length; i++) {
                this.typeList.push({
                  label: res.response[i].name,
                  value: res.response[i].typeId
                });
              }
            }
            this.dataList = res.response;
          }
        })
        .catch(res => {});
    },
    changeType(item) {
      this.selModule = item;
      this.query.courseProject = item.value;
      this.getDefData();
    },
    changeSort() {
      this.query.orderByField =
        this.query.orderByField == "gmt_create asc"
          ? "gmt_create desc"
          : "gmt_create asc";
      this.getDefData();
    },
    getModules() {
      allCategory({ categoryId: 1 }).then(res => {
        if (res.code == 1) {
          res.response.map(item => {
            this.moduleList.push({
              name: item.concreteName,
              value: item.id
            });
          });
        }
      });
    },
    moreData(item) {
      this.$router.push({
        path: "/train/search?condition=" + "&courseType=" + item.typeId
      });
    },
    goDetail(item) {
      this.$router.push({
        path: "/train/detail/" + item.id
      });
    }
  },
  created() {
    this.IMG_ROOT = IMG_ROOT;
    this.getDefData();
    this.getModules();
  }
};
</script>
<style lang="scss" scoped>
.search {
  text-align: center;
  padding: 20px 0;
  font-size: 0px;
}
.module {
  box-sizing: content-box;
  height: 30px;
  line-height: 30px;
  padding: 7px 10px;
  background-color: #fff;
}
.verticalLine {
  padding: 0 15px;
  &:after {
    content: "";
    border-right: 1px solid #ccc;
  }
}
.tyleItem {
  padding: 0 5px;
  margin: 0 3px;
  font-size: 18px;
  display: inline-block;
  border-radius: 5px;
  cursor: default;
}
.tyleItem.sel {
  background: rgb(0, 124, 220);
  color: #fff;
}
.iconfont.on {
  color: rgb(0, 124, 220);
}
.dataList {
  .grid-content {
    // background-color: #fff;
    // padding: 10px;
    cursor: pointer;
  }
  .img {
    width: 100%;
    height: 145px;
    margin: 0 auto;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .title {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #999;
    .typeName {
      display: inline-block;
      font-size: 16px;
      width: 100px;
      color: #fff;
      background-color: rgb(0, 124, 220);
      text-align: center;
    }
    .more {
      float: right;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 124, 220, 1);
    }
  }
  .course {
    margin: 15px 0 20px 0;
    .firstTitle {
      font-size: 18px;
      font-weight: 400;
      color: rgb(16, 16, 16);
      line-height: 30px;
    }
    .secondTitle {
      font-size: 12px;
      font-weight: 400;
      color: rgb(108, 114, 119);
      line-height: 18px;
      word-break: break-all;
    }
  }
}
</style>
